<template>
  <div class="g-main">
    <div class="g-header">
      <strong>筛选查询</strong>
      <el-row gutter="30" style="margin-top: 10px;">
        <el-col :xs="10" :sm="10" :md="8" :lg="6" :xl="6" class="list-sch">
          <span>关键字搜索</span>
          <el-input v-model="schKey" placeholder="请输入关键字" style="max-width: 200px;"></el-input>
        </el-col>

        <el-col :xs="10" :sm="10" :md="8" :lg="6" :xl="6" class="list-sch">
          <span>商品分类</span>
          <el-select v-model="schType" placeholder="请选择" clearable style="max-width: 200px;">
            <el-option v-for="item in listClassification" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :xs="3" :sm="3" :md="3" :lg="6">
          <el-button round type="primary" style="width: 100px;margin-bottom: 10px;" @click="query()">查询</el-button>
        </el-col>
      </el-row>

    </div>

    <div class="m-main">
      <strong style="margin-bottom:15px;">商品列表</strong>

      <div style="display: flex;justify-content: center;">
        <div class="listPane">
          <div class="list-li" v-for="item in getCurrentLi()" :key="item">
            <div class="li-pane">
              <div class="li-show">
                <VueKeepRatio style="margin-top: 10px;" :ratio="1/1" width="100%">
                  <img :src="item.img" class="list-li-img" />
                </VueKeepRatio>
                <strong style="font-size: 16px;color:#0095ff;">￥{{item.price}}</strong>
                <p style="font-size: 14px;">{{item.name}}</p>
              </div>
              <div class="li-more">
                <div class="li-more-op" @click="toLink(item,'下单')">
                  <svg-icon icon-class="buy" class-name="li-icon icon-buy" />
                  <span>下单</span>
                </div>
                <div class="li-more-op" @click="toLink(item,'收藏')">
                  <svg-icon icon-class="fav" class-name="li-icon icon-fav"/>
                  <span>收藏</span>
                </div>
                <div class="li-more-op" @click="toLink(item,'加购')">
                  <svg-icon icon-class="addCar" class-name="li-icon icon-addCar"/>
                  <span>加购</span>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="list-page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[20, 30, 50, 100]"
          layout="total,sizes,prev, pager, next" :total="listData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        listClassification: [{
          value: "跑步鞋",
          label: "跑步鞋"
        }, {
          value: "休闲鞋",
          label: "休闲鞋"
        }, {
          value: "篮球鞋",
          label: "篮球鞋"
        }],

        listData: [{
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          price: '899.00'
        }],

        currentPage: 1,
        pageSize: 20,

        schKey:'',
        schType:'',
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      getCurrentLi() {
        var st = (this.currentPage - 1) * this.pageSize;
        var ed = st + this.pageSize;
        var ans = this.listData.slice(st, ed);
        return ans;
      },
      toLink(item,status){
        const data={
          shoes_id:item.shoes_id,
          status:status
        }
        console.log(data)
        axios.post('/user/shoes/add',data,{
            headers:{
              'Content-Type': 'application/json'
            }
          })
          .then(res=>{
            console.log(res);
            if(res.data==true){
              this.$message({
                message:'该商品成功'+status,
                type:'success'
              });
            }
            else{
              this.$message({
                message:'该商品已'+status,
                type:'warning'
              })
            }
          })
          .catch(error=>{
            console.log("error: "+error);
          })
      },
      query(){
        const data={
          name:this.$data.schKey,
          type:this.$data.schType
        }
        axios.post('/user/shoes/getkey',data,{
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res=>{
          console.log(res);
          this.$data.listData=res.data;
        })
        .catch(error=>{
          console.log(error);
        })
      }
    },
    mounted: function() {

    },
    created(){
      axios.get('http://localhost:8181/shoes/query').then(res=>{
        this.$data.listData=res.data;
        console.log(res.data);
      })
      .catch(error=>{
        console.log("error: "+error);
      })
    }
  }
</script>

<style lang="scss" scoped>
  $iconOnColor:#12c974;
  $iconOffColor:#979797;
  $iconNotColor:#ff8b47;

  .icon-on {
    color: $iconOnColor;
  }

  .icon-off {
    color: $iconOffColor;
  }

  .icon-not {
    color: $iconNotColor;
  }

  .g-main {
    background-color: #fff;
    max-width:1000px;
    border-radius: 10px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    min-height: 762px;
    margin:0 auto;

    strong {
      font-size: 18px;
    }


    .g-header {
      width: 100%;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;

      .list-sch {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        span {
          min-width: 80px;
          margin-right: 10px;
        }
      }
    }

    .m-main {
      width: 100%;
      display: flex;
      flex-direction: column;

      .listPane {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;


        .list-li {
          $width: 150px;
          $height: 216.4px;
          $width1: -150px;
          margin: 10px;
          width: $width;
          box-shadow: 0px 0px 8px 0px #c0cede;
          border-radius: 10px;
          overflow: hidden;

          .li-pane {
            width: $width*2;
            height: $height;
            display: flex;


            &:hover {
              .li-show {
                margin-left: $width1;
              }

            }


            .li-show {
              display: flex;
              flex-direction: column;
              padding: 10px;
              width: $width;
              height: $height;
              transition: margin .5s ease 0s;

              .list-li-img {
                width: 100%;
                height: auto;
                border-radius: .25rem;
                margin-bottom: 20px;
              }
            }

            .li-more {
              display: flex;
              flex-direction: column;
              padding: 20px;
              align-items: center;
              justify-content: center;
              width: $width;
              height: $height;

              $icon-buy: #49cd84;
              $icon-fav: #f4516c;
              $icon-addCar: #36a3f7;

              .li-more-op {
                display: flex;
                padding: 5px;
                align-items: center;
                border: 2px solid transparent;
                border-radius: 10px;
                margin: 10px;
                cursor: pointer;

                &:hover {
                  border: 2px solid #538ccc;
                }

                .li-icon {
                  margin-right: 15px;
                }

                .icon-buy {
                  width: 20px;
                  height: 20px;
                  color: $icon-buy;
                }

                .icon-fav {
                  width: 25px;
                  height: 25px;
                  color: $icon-fav;
                }

                .icon-addCar {
                  width: 23px;
                  height: 23px;
                  color: $icon-addCar;
                }
              }
            }
          }




        }
      }

      .list-page {
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
